<template>
  <div>
    <div class="order">
      <div class="order-title">
        <div class="left-tit">
          <img
            class="left-img"
            src="static/img/s_order.png"
          >
        </div>
        <div class="center-content">
          <span>商城订单</span>
        </div>
        <div class="right-action">
          <router-link :to="{path:'/user-orderlist',query: {type: 'all'}}">
            <img
              class="right_arrow"
              src="static/img/right_arrow.png"
            >
          </router-link>
        </div>
      </div>
      <div class="line" style="margin-right: 10px;"></div>
      <div class="middle-tab">
        <router-link :to="{path:'/user-orderlist',query: {type: 'fukuan'}}">
          <div class="order-icon">
            <img
              class="order-icon-img"
              src="static/img/dai_fukuan.png"
            >
            <div class="wenzi_color">待付款</div>
          </div>
        </router-link>
        <router-link :to="{path:'/user-orderlist',query: {type: 'fahuo'}}">
          <div class="order-icon">
            <img
              class="order-icon-img"
              src="static/img/dai_fahuo.png"
            >
            <div class="wenzi_color">待发货</div>
          </div>
        </router-link>
        <router-link :to="{path:'/user-orderlist',query: {type: 'shouhuo'}}">
          <div class="order-icon">
            <img
              class="order-icon-img"
              src="static/img/dai_shouhuo.png"
            >
            <div class="wenzi_color">待收货</div>
          </div>
        </router-link>
        <router-link :to="{path:'/user-orderlist',query: {type: 'pingjia'}}">
          <div class="order-icon">
            <img
              class="order-icon-img"
              src="static/img/dai_pingjia.png"
            >
            <div class="wenzi_color">待评价</div>
          </div>
        </router-link>
        <router-link :to="{path:'/user-orderlist',query: {type: 'shouhou'}}">
          <div class="order-icon">
            <img
              class="order-icon-img"
              src="static/img/xiao_houzhong.png"
            >
            <div class="wenzi_color">售后中</div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="order">
      <div class="order-title">
      </div>
      <div class="middle-tab-bot">
        <div class="order-icon">
          <router-link to="/referrer">
            <img
              class="order-icon-img"
              src="static/icon/referrer.png"
            >
            <div class="wenzi_color">我的团队</div>
          </router-link>
        </div>
        <div class="order-icon">
          <router-link to="/user-cumulation">
            <img
              class="order-icon-img"
              src="static/icon/cumulation.png"
            >
            <div class="wenzi_color">我的收益</div>
          </router-link>
        </div>
        <div class="order-icon">
          <router-link to="/user-address">
            <img
              class="order-icon-img"
              src="static/icon/address.png"
            >
            <div class="wenzi_color">收货地址</div>
          </router-link>
        </div>
        <div class="order-icon">
          <router-link to="/GlobalPoint">
            <img
              class="order-icon-img"
              src="static/icon/point.png"
            >
            <div class="wenzi_color">分红记录</div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="order">
      <div class="order-title">
        <div class="left-tit">
          <img
            class="left-img"
            src="../../../assets/img/gongneng.png"
          >
        </div>
        <div class="center-content">
          <span>功能</span>
        </div>
        <div class="right-action">
          <router-link to="/user">
            <img
              class="right_arrow"
              src="static/img/right_arrow.png"
            >
          </router-link>
        </div>
      </div>
      <div class="line" style="margin-right: 10px;"></div>
      <div class="middle-tab-bot">
        <!-- <div class="order-icon">
          <img
            class="order-icon-img"
            src="../../../assets/img/tuiguang.png"
          >
          <div class="wenzi_color">推广排行榜</div>
        </div>
        <div class="order-icon">
          <img
            class="order-icon-img"
            src="../../../assets/img/paihang.png"
          >
          <div class="wenzi_color">店铺龙虎榜</div>
        </div> -->
        <div class="order-icon">
          <router-link to="/user-haowu">
            <img
              class="order-icon-img"
              src="static/icon/second.png"
            >
            <div class="wenzi_color">卿点好物</div>
          </router-link>
        </div>
        <div class="order-icon">
          <router-link to="/user-collect">
            <img
              class="order-icon-img"
              src="static/icon/collect.png"
            >
            <div class="wenzi_color">商品收藏</div>
          </router-link>
        </div>
        <div class="order-icon">
          <router-link to="/my-identity">
            <img
              class="order-icon-img"
              src="static/img/jilu.png"
            >
            <div class="wenzi_color">身份记录</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserOrder'
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.order
  background-color: white
  border-top: 0.02rem solid #eee
  border-bottom: 0.02rem solid #eee
  margin-top: 0.2rem
  .order-title
    padding-top: 0.2rem
    padding-bottom: 0.2rem
    .left-tit
      width: 28%
      display: inline-block
      padding-left: 0.2rem
      color: #222
      max-width: 0.7rem
      vertical-align: sub
      line-height: 0.45rem
      .left-img
        width: 0.36rem
        height: 0.36rem
    .center-content
      width: 65%
      vertical-align: sub
      display: inline-block
      color: #333
      font-size: 0.32rem
    .right-action
      display: inline-block
      width: 20% !important
      float: right
      text-align: right
      .right_arrow
        width: 0.16rem
        height: 0.28rem
        margin-right: 0.3rem
  .line
    margin-right: 0.2rem
    background-color: #eee
    margin-left: 0.2rem
    height: 0.02rem
  .middle-tab
    background-color: white
    width: 91
    margin: 0 auto
    .order-icon
      width: 18% !important
      text-align: center
      display: inline-block
      vertical-align: middle
      padding-bottom: .1rem
      padding-top: 0.25rem
      .order-icon-img
        width: 0.4rem
        height: 0.4rem
      .wenzi_color
        font-size: 0.25rem
        color: #494949
        margin-top: 0.1rem
        margin-bottom: 0.1rem
        line-height: 0.5rem
        width: 100%
        ellipsis()
  .middle-tab-bot
    background-color: white
    width: 91
    margin: 0 auto
    .order-icon
      width: 23% !important
      text-align: center
      display: inline-block
      vertical-align: middle
      padding-bottom: 0.1rem
      padding-top: 0.15rem
      .order-icon-img
        width: .7rem
        height: .7rem
      .wenzi_color
        font-size: 0.25rem
        color: #494949
        margin-top: 0.1rem
        margin-bottom: 0.1rem
        line-height: 0.5rem
        width: 100%
        ellipsis()
.manage
  background-color: white
  border-top: 1px solid #eee
  border-bottom: 1px solid #eee
  margin-top: 10px
  .middle-tab
    background-color: white
    padding: .1rem
    .order-icon
      width: 23%
      text-align: center
      display: inline-block
      vertical-align: middle
      padding-bottom: .15rem
      padding-top: .15rem
      border-bottom: .1rem solid #fff
      .wodetuandui
        background-position: 0 -8rem
      .leijishouyi
        background-position: 0 -7rem
      .shouhuodizhi
        background-position: 0 0
      .quanqiufenhong
        background-position: 0 -4rem
      .wodedianpu
        background-position: 0 -20rem
</style>
